<template>
	<view class="entbox">
		<view class="entimg"@click="gotoxz">
			<up-swiper :list="list1" height="344rpx"></up-swiper>
			<!-- <image class="entimg" src="/static/logo.png" mode="" @click="gotoxz"></image> -->
		</view>
		<view class="entit">场馆列表</view>
		<view class="listnav" v-for="(item,index) in list" :key="index">
			<image class="liimage" :src="item.image" mode=""></image>
			<view class="">
				<view>{{item.name}}</view>
				<view class="lidiz">{{item.address}}</view>
				<view class="linum">实时人数[{{item.current_num}}]</view>
				<view class="buttbox">
					<view class="boxbu" @click="gotoven(item)">包场</view>
					<view class="boxbu" @click="gotocon(item.id)">散客</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {onLoad} from '@dcloudio/uni-app'
	import request from '../../utils/request';
	let latitude = ref(34.75352) // 纬度
	let longitude = ref(113.675051)
	let token=ref('')
	onLoad(() => {
		token.value=uni.getStorageSync('token')
		request.get('index/getSlides',{
			data:{
				type:'shop'
			}
		}).then(res=>{
			console.log(res);
			console.log(res.data);
			list1.value = res.data.map(item => item.image);
			console.log(list1.value);
		}).catch(err=>{
			console.log(err);
		})
		uni.authorize({
			scope:'scope.userLocation',
			success: (res)=> {
				 uni.getLocation({
					 type:'wgs84',
					 success: (res) => {
					 	console.log(res);
						longitude.value = res.longitude;
						latitude.value = res.latitude;
						console.log(latitude.value);
						request.post('Places/lists',{data:{
							lng:longitude.value,
							lat:latitude.value
						},
						header:{
							"token":token.value
						}}).then(res=>{
							console.log(res);
							list.value=res.data
							console.log(list.value);
							uni.setStorageSync("latitude",latitude.value)
							uni.setStorageSync("longitude",longitude.value )
							
						}).catch(err =>{
							console.log(err);
						})
					 },
					 fail: (err) => {
						 
					 	console.error('获取位置信息失败：', err);
					 	      uni.showToast({
					 	        title: '获取位置信息失败，请检查位置服务是否开启',
					 	        icon: 'none'
					 	      });
					 }
				 })
			},
			fail: err => {
				console.log(err, 'err')
			}
		})
		
	})
	let list1= ref([])
	let list = ref([])
	const gotoven = (item) => {
		uni.setStorageSync("places_id",item.id )
		uni.setStorageSync("type1",'1' )
		uni.navigateTo({
			url:'/pages/venue/venue'
		})
	}
	const gotocon = (id) => {
		uni.setStorageSync("places_id",id )
		uni.navigateTo({
			url: `/pages/confirm/confirm?id=${id}`
		})
	}
	const gotoxz = () => {
		uni.navigateTo({
			url: '/pages/guide/guide'
		})
	}
</script>

<style scoped>
	.entbox {
		width: 100%;
		height: 100vh;
		background-color: #f8f8f8;
	}

	.imgbox {
		width: 100%;
		height: 340rpx;
		background-color: #fff;
	}

	.entimg {
		display: block;
		width: 716rpx;
		height: 340rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.entit {
		width: 100%;
		height: 36rpx;
		margin: 30rpx 0;
		padding-left: 20rpx;
		border-left: 2px #10c696 solid;
		font-size: 13px;
		font-weight: 700;
		line-height: 36rpx;
	}

	.listnav {
		width: 700rpx;
		height: 280rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin: 0 auto;
		margin-bottom: 18rpx;
		box-shadow: 0 0 25px -15px rgba(0, 0, 0, .5);
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		box-sizing: border-box;
	}

	.liimage {
		width: 240rpx;
		height: 200rpx;
		border-radius: 15rpx;
		margin-right: 16rpx;
	}

	.lidiz {
		font-size: 12px;
		color: #9e9e9e;
		margin-top: 5rpx;
	}

	.linum {
		width: 150rpx;
		text-align: center;
		font-size: 10px;
		color: red;
		background-color: rgba(255, 0, 0, .1);
		border: 1px solid #c7c7c7;
		margin-top: 5rpx;
	}

	.buttbox {
		display: flex;
		align-self: center;
		margin-top: 15rpx;
	}

	.boxbu {
		width: 130rpx;
		height: 60rpx;
		border-radius: 40rpx;
		line-height: 60rpx;
		font-size: 14px;
		color: #fff;
		text-align: center;
		background-color: #10c696;
		margin-right: 20rpx;
	}
</style>